{{#if selectedLeaderboard}}
  <DButton
    class="leaderboard-admin__btn-back btn-flat"
    @icon="chevron-left"
    @label="gamification.back"
    @title="gamification.back"
    @action={{action (mut selectedLeaderboardId) null}}
  />
  <form class="form-vertical">
    <div class="control-group">
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.name"}}
        </label>
        <Input
          @type="text"
          @value={{selectedLeaderboard.name}}
          placeholder={{i18n "gamification.leaderboard.name"}}
        />
      </div>
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.date.range"}}
        </label>
        <div class="controls">
          <DatePickerPast
            @placeholder="yyyy-mm-dd"
            @value={{selectedLeaderboard.from_date}}
            @onSelect={{action (mut fromDate)}}
            class="date-input"
          />
          <DatePicker
            @placeholder="yyyy-mm-dd"
            @value={{selectedLeaderboard.to_date}}
            @onSelect={{action (mut toDate)}}
            class="date-input"
          />
          <div>{{i18n "gamification.leaderboard.date.helper"}}</div>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.included_groups"}}
        </label>
        <GroupChooser
          @content={{this.siteGroups}}
          @value={{includedGroupIds}}
          @labelProperty="name"
          @onChange={{action (mut includedGroupIds)}}
        />
        <div>{{i18n "gamification.leaderboard.included_groups_help"}}</div>
      </div>
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.excluded_groups"}}
        </label>
        <GroupChooser
          @content={{this.siteGroups}}
          @value={{excludedGroupIds}}
          @labelProperty="name"
          @onChange={{action (mut excludedGroupIds)}}
        />
        <div>{{i18n "gamification.leaderboard.excluded_groups_help"}}</div>
      </div>
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.visible_to_groups"}}
        </label>
        <GroupChooser
          @content={{this.siteGroups}}
          @value={{visibleGroupIds}}
          @labelProperty="name"
          @onChange={{action (mut visibleGroupIds)}}
        />
        <div>{{i18n "gamification.leaderboard.visible_to_groups_help"}}</div>
      </div>
      <div class="control-group">
        <label class="control-label">
          {{i18n "gamification.leaderboard.default_period"}}
        </label>
        <PeriodInput @value={{selectedLeaderboard.default_period}} />
        <div>{{i18n "gamification.leaderboard.default_period_help"}}</div>
      </div>
    </div>
    <DButton
      class="btn-primary"
      @label="gamification.save"
      @action={{action "saveEdit"}}
      @disabled={{saveEditDisabled}}
    />
    <DButton
      class="btn-secondary leaderboard-admin__btn-cancel-edit"
      @label="gamification.cancel"
      @action={{action (mut selectedLeaderboardId) null}}
    />
  </form>

{{else}}
  <h3 class="leaderboard-admin__title">
    {{i18n "gamification.leaderboard.title"}}
  </h3>

  {{#if creatingNew}}
    <div class="new-leaderboard-container">
      <Input
        @type="text"
        @value={{newLeaderboardName}}
        placeholder={{i18n "gamification.leaderboard.name_placeholder"}}
      />
      <DButton
        @label="gamification.create"
        @title="gamification.create"
        class="btn-primary create-new-leaderboard-btn"
        @disabled={{not nameValid}}
        @action={{action "createNewLeaderboard"}}
      />
      <DButton
        @label="gamification.cancel"
        @title="gamification.cancel"
        @action={{action (mut selectedLeaderboardId) null}}
      />
    </div>

  {{else}}
    {{#if model.leaderboards}}
      <DButton
        @label="gamification.leaderboard.new"
        @title="gamification.leaderboard.new"
        @icon="plus"
        class="btn-primary leaderboard-admin__btn-new"
        @action={{action (mut creatingNew) true}}
      />

      <DButton
        @label="gamification.recalculate"
        @title="gamification.recalculate"
        class="btn-secondary leaderboard-admin__btn-recalculate"
        @action={{action "recalculateScores"}}
      />
    {{/if}}
  {{/if}}

  <div class="leaderboards">
    {{#if model.leaderboards}}
      <table>
        <thead>
          <th>{{i18n "gamification.admin.name"}}</th>
          <th>{{i18n "gamification.admin.period"}}</th>
          <th></th>
          <th></th>
        </thead>

        <tbody>
          {{#each sortedLeaderboards as |leaderboard|}}
            <tr>
              <td>
                <LinkTo
                  @route="gamificationLeaderboard.byName"
                  @model={{leaderboard.id}}
                >
                  {{leaderboard.name}}
                </LinkTo>
              </td>
              <td>
                {{#if leaderboard.from_date}}
                  {{format-date leaderboard.from_date}}
                  -
                  {{format-date leaderboard.to_date}}
                {{else}}
                  {{leaderboard.default_period}}
                {{/if}}
              </td>
              <td class="leaderboard-admin__listitem-action">
                <DButton
                  class="btn-flat"
                  @icon="pencil-alt"
                  @title="gamification.edit"
                  @action={{action (mut selectedLeaderboardId) leaderboard.id}}
                />
              </td>
              <td class="leaderboard-admin__listitem-action">
                <DButton
                  class="btn-flat"
                  @icon="trash-alt"
                  @title="gamification.delete"
                  @action={{action "destroyLeaderboard" leaderboard}}
                />
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    {{else}}
      {{#unless creatingNew}}
        {{i18n "gamification.leaderboard.none"}}
        <DButton
          @label="gamification.leaderboard.cta"
          class="btn-primary leaderboard-admin__cta-new"
          @action={{action (mut creatingNew) true}}
        />
      {{/unless}}
    {{/if}}
  </div>
{{/if}}